<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const active = ref(0)
const router = useRouter()
const route = useRoute()

onMounted(() => {
  console.log('router', router)
  console.log('route', route)
  const data = router.options.routes[0]
  active.value = data.children.findIndex((item) => '/' + item.path === route.path)
})
</script>

<template>
  <router-view></router-view>

  <van-tabbar v-model="active">
    <van-tabbar-item
      v-for="item in router.options.routes[0].children"
      :key="item.path"
      :icon="item.meta.icon"
      :url="`#/${item.path}`"
      >{{ item.meta.name }}</van-tabbar-item
    >
  </van-tabbar>
</template>

<style scoped lang="less"></style>
